
<!-- <template>
    <el-upload
      class="upload-demo"
      drag
      action="http://localhost:8080/oss/fileoss"
      multiple
      >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
</template> -->
<template>
    <el-upload
      class="avatar-uploader"
      action="http://localhost:8080/oss/fileoss"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</template>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>
  export default {
    data() {
      return {
        imageUrl: ''
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        console.log(res)
        //console.log(file)
        //将阿里云地址放到数据库
        this.$axios.put("sysuser/headImg", {
          "username":this.user.username,
          "headUrl":res.data
        }).then(res => {
          //if(res.data.status == "SUCCESS"){
            this.$message.success("头像修改成功")

            //this.$router.push("/logout")
          //}else{
            //this.$message.error("修改失败")
          //}
        })

        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        //console.log(file)
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 5;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 5MB!');
        }
        return isJPG && isLt2M;
      }
    },
    mounted() {
      //从本地取出user对象
      this.user = JSON.parse(sessionStorage.getItem("user"))
    }
  }
</script>
<!-- <template>
  <div style="text-align: center; margin-top:200px;" v-loading="loading">
    <el-upload
      class="upload-demo"
      name="files"
      drag
      action="http://localhost:8080/oss/fileoss"
      :before-upload="beforeAvatarUpload"
      :on-success="handleSuccess"
      :limit="1"
      :show-file-list="false">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
  export default{
    data(){
      return {
        loading: false,
      }
    },
    methods: {
      beforeAvatarUpload: function(){
        this.loading = true;
      },
      handleSuccess: function(response){
        if(response.status == "SUCCESS"){
          console.log(response);
          this.$axios.post(
            "http://localhost:8080/acct/chgHeadImg",
            response.data[0],
            { headers:{ 'Content-Type':'text/plain' } }
            ).then(res => {
            if(res.data.status == "SUCCESS"){
            // 将sessionStorage中的user对象替换为最新的
            sessionStorage.setItem("user", JSON.stringify(res.data.data))

            this.$message.success("头像修改成功")
            }else{
              this.$message.error("头像设置失败")
            }

            this.loading = false;
          })
        }else{
          this.loading = false;
          this.$message.error("文件上传失败")
        }
      }
    }
  }
</script>

<style scoped>

</style> -->






<!--
<template>
    <el-upload
      class="avatar-uploader"
      action=""
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</template>



<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>
  export default {
    data() {
      return {
        imageUrl: '',
        file:''
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
         //console.log(res)
         //console.log(file)

        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        console.log(file)
        // console.log(this.file)
        // this.file = file
        // console.log(this.file)
        // this.$axios.post("http://localhost:8080/oss/fileoss",{
        //           file:this.file
        // }).then(res => {
        //         console.log(1)
        // })

        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script> -->





<!-- <template> -->
  <!-- 讲师头像 -->

 <!-- <el-form-item label="讲师头像"> -->


      <!-- 头衔缩略图 -->

   <!--    <pan-thumb :image="teacher.avatar"/> -->

      <!-- 文件上传按钮 -->

     <!--  <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像

      </el-button> -->


      <!--
  11
  v-show：是否显示上传组件
  12
  :key：类似于id，如果一个页面多个图片上传控件，可以做区分
  13
  :url：后台上传的url地址
  14
  @close：关闭上传组件
  15
  @crop-upload-success：上传成功后的回调 -->

   <!--    <image-cropper

                     v-show="imagecropperShow"

                     :width="300"

                     :height="300"

                     :key="imagecropperKey"

                     :url="BASE_API+'/admin/oss/file/upload'"

                     field="file"

                     @close="close"

                     @crop-upload-success="cropSuccess"/>


  </el-form-item>

</template>


<script> -->
//   export default {

//     components: { ImageCropper, PanThumb },

//     data() {

//       return {

//         //其它数据模型

//         

//           

//         BASE_API: process.env.BASE_API, // 接口API地址

//         imagecropperShow: false, // 是否显示上传组件

//         imagecropperKey: 0 // 上传组件id

//       }

//     },

//       

//     

//       

//     methods: {

//       //其他函数

//       


//       // 上传成功后的回调函数

//       cropSuccess(data) {

//         console.log(data)

//         this.imagecropperShow = false

//         this.teacher.avatar = data.url

//         // 上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果

//         this.imagecropperKey = this.imagecropperKey + 1

//       },


//       // 关闭上传组件

//       close() {

//         this.imagecropperShow = false

//         // 上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果

//         this.imagecropperKey = this.imagecropperKey + 1

//       }

//     }

// }
 // </script>
